<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自制画板</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <canvas id="canvas">
    </canvas>
    <div class="color">
        <div class="black"></div>
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
        <div class="yellow"></div>
        <div class="orange"></div>
        <div class="purple"></div>
        <div class="grey"></div>
    </div>
    <div class="lineWidth">
        <div class="slide"></div>
        <div class="middle"></div>
        <div class="strong"></div>
    </div>
     <a href="javascript:;" class="clear">clear</a>
    <script>
        // 选择画笔颜色
        let color ='black'
        const colors = document.querySelector('.color')
        const children =colors.children
        for(let i=0;i<children.length;i++){
            children[i].style.background=children[i].classList[0]
        }
        colors.addEventListener('click',(event)=>{
           color=event.target.classList[0]
        })
        // 选择画笔粗细
        let lineWidth = 10
        let lineWidthHash={
            'slide':5,
            'middle':10,
            strong:20
        }
        const lineWidths =document.querySelector('.lineWidth')
        lineWidths.addEventListener('click',(event)=>{
           let attr=event.target.classList[0]
           lineWidth=lineWidthHash[attr]
        })
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        // 清空功能
        const clearButton=document.querySelector('.clear')
        clearButton.addEventListener('click',()=>{canvas.height=canvas.height;})
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        var isTouch = 'ontouchstart' in document.documentElement;//  判断触摸屏
        var lastX;
        var lastY;
        if (isTouch) {                      //  判断设备是否是触摸平屏
            canvas.ontouchmove = (e) => {
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(e.touches[0].clientX, e.touches[0].clientY);
                ctx.stroke();
                ctx.lineWidth = lineWidth;
                ctx.strokeStyle = color;
                ctx.lineCap = 'round';
                lastX = e.touches[0].clientX;
                lastY = e.touches[0].clientY;
            }
        } else {
            var x = false;  //  用来检验鼠标抬起还是摁下
            canvas.onmousedown = function (e) {   //  鼠标点击获得鼠标位置
                x = true;
                lastX = e.clientX;
                lastY = e.clientY;
            }
            canvas.onmousemove = function (e) {
                if (x) {
                    ctx.beginPath();
                    ctx.moveTo(lastX, lastY);   //  线的起点
                    ctx.lineTo(e.clientX, e.clientY);  //  线的终点
                    ctx.stroke();
                    ctx.lineWidth = lineWidth; //  线粗
                    ctx.strokeStyle = color; //  线颜色
                    ctx.lineCap = 'round';
                    lastX = e.clientX;  //  实时更新起点位置
                    lastY = e.clientY;
                    
                }

            }
            canvas.onmouseup = function () {   //  鼠标抬起停止画画
                x = false;
            }
        }
    </script>
</body>

</html>